#tags {
  .tags-container {
    @include left-container;
    width: 66%;
    padding: 0;
  }
  .tags {
    padding: 25px 25px 20px;
    border-bottom: 1px solid rgba(178, 186, 194, .15);
    a,
    .tag {
      display: inline-block;
      padding: 0 10px;
      line-height: 1.6em;
      font-size: 14px;
      text-decoration: none;
      margin-bottom: 6px;
      cursor: pointer;
      border: 1px solid #6E7173;
      border-radius: 20px;
      color: #404040;
      font-weight: 200;
      transition: $transition;
      &:hover,
      &:active {
        color: white;
        border-color: $hover-color;
        background-color: $hover-color;
      }
    }
  }
  .tag-list {
    padding: 20px 25px 15px;
    border-bottom: 1px solid rgba(178, 186, 194, .15);
    .listing-seperator {
      color: $hover-color;
      .tag-text {
        font-weight: 200;
        line-height: 1.7;
      }
    }
    .post-preview {
      margin-left: 16px;
      h2.post-title {
        color: rgb(64, 64, 64);
        transition: $transition;
        &:hover {
          color: $hover-color;
        }
      }
    }
  }
  .post-preview {
    position: relative;
    &> {
      .post-meta {
        position: absolute;
        right: 5px;
        bottom: 0px;
        margin: 0px;
        font-size: 12px;
        line-height: 12px;
      }
      a {
        .post-title {
          font-size: 16px;
          font-weight: 500;
          margin-top: 20px;
        }
        .post-subtitle {
          font-size: 12px;
        }
      }
    }
  }
}

@media (min-width: $breakpoint-desktop) {
  #tags {
    width: 1000px;
  }
}

@media (max-width: $breakpoint-phone) {
  #tags {
    .tags-container {
      width: 100%;
    }
  }
}
